<template>
	<header class="bg-white-only header header-md navbar navbar-fixed-top-xs">
		<div class="navbar-header aside bg-info nav-xs">
			<a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open" data-target="#nav,html">
				<i class="icon-list"></i>
			</a>
			<a href="/hgzx/" class="navbar-brand text-lt">
				<i class="icon-social-twitter fa fa-lg"></i>
				<!-- <img src="../assets/images/logo.png" alt="." class="hide"> -->
				<span class="hidden-nav-xs m-l-sm">回归自性</span>
			</a>
			<a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".user">
				<i class="icon-settings"></i>
			</a>
		</div>
		<ul class="nav navbar-nav hidden-xs">
			<li>
				<a href="#nav,.navbar-header" data-toggle="class:nav-xs,nav-xs" class="text-muted">
					<i class="fa fa-indent text"></i>
					<i class="fa fa-dedent text-active"></i>
				</a>
			</li>
		</ul>
		<form class="navbar-form navbar-left input-s-lg m-t m-l-n-xs hidden-xs" role="search" v-on:submit.prevent>
			<div class="form-group">
				<div class="input-group">
					<input type="text" class="form-control input-md " placeholder="输入关键字搜索..." v-model="keywords" @keyup.enter="query()">
					<span class="input-group-btn">
						<button type="button" class="btn btn-md btn-icon " @click="query"><i class="fa fa-search"></i></button>
					</span>
				</div>
			</div>
		</form>
		<div class="navbar-right ">
			<ul class="nav navbar-nav m-n hidden-xs nav-user user">
				<li class="hidden-xs">
					<a href="#" class="dropdown-toggle lt" data-toggle="dropdown">
						<i class="icon-bell"></i>
						<span class="badge badge-sm up bg-danger count">2</span>
					</a>
					<section class="dropdown-menu aside-xl animated fadeInUp">
						<section class="panel bg-white">
							<div class="panel-heading b-light bg-light">
								<strong>你有 <span class="count">2</span> 条消息</strong>
							</div>
							<div class="list-group list-group-alt">
								<a href="#" class="media list-group-item">
									<span class="pull-left thumb-sm">
										<img src="../assets/images/a0.png" alt="..." class="img-circle">
									</span>
									<span class="media-body block m-b-none">
										使用UI图标锦集<br>
										<small class="text-muted">10 分钟 前</small>
									</span>
								</a>
								<a href="#" class="media list-group-item">
									<span class="media-body block m-b-none">
										新版本APP升级<br>
										<small class="text-muted">1 小时 前</small>
									</span>
								</a>
							</div>
							<div class="panel-footer text-sm">
								<a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
								<a href="#notes" data-toggle="class:show animated fadeInRight">查看所有的消息</a>
							</div>
						</section>
					</section>
				</li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle bg clear" data-toggle="dropdown">
						<span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
							<img :src="$store.getters['auth/avatar']" alt="...">
						</span>
						<span v-if="$store.state.auth.logged">
							{{ $store.getters['auth/nick'] }} <b class="caret"></b>
						</span>
						<span v-else>
							<a href="#login-Dialog" data-toggle="modal">登录</a>
						</span>
					</a>
					<ul v-if="$store.state.auth.logged" class="dropdown-menu animated fadeInRight">
						<li>
							<span class="arrow top"></span>
							<a href="#">设置</a>
						</li>
						<li>
							<router-link to="/user/profile">我的</router-link>
						</li>
						<li>
							<a href="#">
								<span class="badge bg-danger pull-right">3</span>
								消息
							</a>
						</li>
						<li>
							<a href="docs.html">帮助</a>
						</li>
						<li class="divider"></li>
						<li v-if="$store.state.auth.logged">
							<a href="javascript:void(0)" v-on:click="logout()">退出</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</header>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				keywords: ''
			}
		},
		mounted() {

		},
		methods: {
			query() {
				console.log('Header keywords', this.keywords);
				// getkeywords是在父组件on监听的方法
				this.$emit('getkeywords', this.keywords);
			},
			logout: async function() {
				await this.$store.commit("auth/logout");
				await this.$router.replace({
					name: 'Home'
				})
				location.reload();
			}
		}
	}
</script>
